{extend name="public/base" /}
{block name="body"}
<body class="hold-transition skin-purple sidebar-mini">

<!-- 显示图片模态框 -->
<div class="modal fade" id="bigImgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" style="top:20%;left: 5%;" role="document">
    <div class="modal-content" style="width: 410px;padding: 0 10px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body" style="height: 100%;width: 100%;text-align: center;">
        <div style="width: 360px;height: 350px;">
          <img id="bigImg" src="" alt="暂无" style="width: 100%;height: 100%;">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<!-- /显示图片模态框 -->

<div class="wrapper">

  <!-- 内容区域 -->
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        生产管理
        <small>Produce Tables</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="home.html"><i class="fa fa-dashboard"></i>主页</a></li>
        <li><a href="#">系统管理</a></li>
        <li class="active">生产管理</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <!-- 待审批生产 -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <i class="fa fa-cube"></i>
              <h3 class="box-title">待审批生产</h3>
            </div>

            <div class="box-body">

              <!-- 数据表格 -->
              <div class="table-box">

                <!--数据列表-->
                <table id="pendingList" class="table table-hover table-striped table-bordered"
                       data-search-highlight="true"
                       data-show-pagination-switch="true"
                       data-show-search-button="true"
                       data-show-search-clear-button="true"
                       data-sort-name="pID"
                       data-total-field="count"
                       data-toolbar="#toolbar"
                >
                </table>
                <!--数据列表/-->

              </div>
              <!-- 数据表格 /-->

            </div>
            <!-- /.box-body -->

          </div>
          <!-- 待审批生产 /-->
          <!-- /.box -->

          <!-- 全部生产 -->
          <div class="box box-success">
            <div class="box-header with-border">
              <i class="fa fa-book"></i>
              <h3 class="box-title">全部生产</h3>
            </div>

            <div class="box-body">

              <!-- 数据表格 -->
              <div class="table-box">

                <!--数据列表-->
                <table id="allList" class="table table-hover table-striped table-bordered"
                       data-search-highlight="true"
                       data-show-pagination-switch="true"
                       data-show-search-button="true"
                       data-show-search-clear-button="true"
                       data-sort-name="pID"
                       data-total-field="count"
                       data-toolbar="#toolbar"
                >
                </table>
                <!--数据列表/-->

              </div>
              <!-- 数据表格 /-->

            </div>
            <!-- /.box-body -->

          </div>
          <!-- 全部生产 /-->

          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- page script -->
  <!-- 内容区域 /-->


</div>

<!-- 引入js依赖 -->
{include file="public/introduce" /}

<script>

  $(document).ready(function() {
    // 选择框
    $(".select2").select2();

    // WYSIHTML5编辑器
    $(".textarea").wysihtml5({
      locale: 'zh-CN'
    });
  });


  // 设置激活菜单
  function setSidebarActive(tagUri) {
    var liObj = $("#" + tagUri);
    if (liObj.length > 0) {
      liObj.parent().parent().addClass("active");
      liObj.addClass("active");
    }
  }


  // 激活导航位置
  setSidebarActive("admin-produce");

  /** 开始 **/
  $(function () {

    /* td内容转换 */
    function dataMatter(value){
      var val = value;
      var button;
      if(val == 1){
        button = "<span class=\"label label-success\">Approved</span>"
      }else if (val == 2){
        button = "<span class=\"label label-warning\">Pending</span>"
      }else{
        button = "<span class=\"label label-danger\">Denied</span>";
      }
      return button;
    }

    /* 表格超出宽度鼠标悬停显示td内容 */
    function paramsMatter(value, row, index) {
      var span = document.createElement("span");
      span.setAttribute("title", value);
      span.innerHTML = value;

      return span.outerHTML;
    }

    /* td宽度以及内容超过宽度隐藏 */
    function formatTableUnit(value, row, index) {
      return {
        css: {
          "white-space": "nowrap",
          "text-overflow": "ellipsis",
          "overflow": "hidden",
          "max-width": "80px",
        }
      }
    }

    /** pendingList表格赋值 **/
    $('#pendingList').bootstrapTable({

      method: 'post',
      url: "../index/getPendingList", // 请求路径
      striped: true, // 是否显示行间隔色
      pageNumber: 1, // 初始化加载第一页
      pagination: true, // 是否分页
      search: true, //搜索
      showRefresh: true, //搜索处刷新
      clickToSelect: true, //是否启用点击一行任意位置选中该行
      sortOrder: "desc",     //排序方式
      sidePagination: 'client', // server:服务器端分页|client：前端分页
      pageSize: 5, // 单页记录数
      pageList: [5, 10, 15],

      queryParams: function(params) { // 上传服务器的参数
        var temp = {
          name: $("#sname").val(),
          viewReason: $("#viewReason").val(),
        };
        return temp;

      },

      columns: [
        {field:'pID', title:'生产序号', sortable: true, width:10},
        {field:'gName', title:'产品名称', sortable: true, width:10,
          cellStyle: formatTableUnit,
          formatter: paramsMatter,},
        {
          title: '产品图片',
          field: 'gImg',
          cellStyle: function (value, row, index) {
            return {
              css: {
                "text-align": "center",
                "height": "100%",
                "width": "120px"
              }
            }
          },
          formatter : function (value, row, index) {
            // __PUBLIC__ 会报错
            //  __STATIC__/../ => public 文件夹
            var img_src = "__STATIC__/../uploads/goodsImg/"+value;
            return "<a href='#' onclick='pendingListBigImg("+index+")'><img style='width: 110px;height: 80px;' src='"+img_src+"' alt='暂无图片'></a>"
          }
        },
        {field:'gNum', title:'生产数量', sortable: true},
        {field:'gPrice', title:'定价', sortable: true},
        {field:'gPlace', title:'生产地点',sortable: true,
          cellStyle: formatTableUnit,
          formatter: paramsMatter,},
        {field:'gDate', title:'生产日期', sortable: true},
        {field:'gProcess', title:'生产加工', sortable: true,
          cellStyle: formatTableUnit,
          formatter: paramsMatter,},
        {field:'gMaterial', title:'原材料',sortable: true,
          cellStyle: formatTableUnit,
          formatter: paramsMatter,},
        {field:'gQuality', title:'产品质量', sortable: true},
        {field:'gGrade', title:'产品等级', sortable: true},
        {field:'cOpinion', title:'村镇意见', formatter: dataMatter},
        {field:'cVerify', title:'县市审核', sortable: true, formatter: function (value, row, index){
            return "<button type=\"button\" class=\"btn btn-success btn-xs btn_approve\" onclick=\"btnApproveConfirm(this)\" name=\"produce\">通过</button>\n" +
                    "                      <button type=\"button\" class=\"btn btn-danger btn-xs btn_deny\" onclick='btnDenyConfirm(this)' name=\"produce\">不通过</button>"
          }},
      ],


    })

    /** allList表格赋值 **/
    $('#allList').bootstrapTable({

      method: 'post',
      url: "../index/getAllList", // 请求路径
      striped: true, // 是否显示行间隔色
      pageNumber: 1, // 初始化加载第一页
      pagination: true, // 是否分页
      search: true, //搜索
      showRefresh: true, //搜索处刷新
      clickToSelect: true, //是否启用点击一行任意位置选中该行
      sortOrder: "desc",     //排序方式
      sidePagination: 'client', // server:服务器端分页|client：前端分页
      pageSize: 5, // 单页记录数
      pageList: [5, 10, 15],

      queryParams: function(params) { // 上传服务器的参数
        var temp = {
          name: $("#sname").val(),
          viewReason: $("#viewReason").val(),
        };
        return temp;

      },

      columns: [
        {field:'pID', title:'生产序号', sortable: true, width:10},
        {field:'gName', title:'产品名称', sortable: true, width:10,
          cellStyle: formatTableUnit,
          formatter: paramsMatter,},
        {
          title: '产品图片',
          field: 'gImg',
          cellStyle: function (value, row, index) {
            return {
              css: {
                "text-align": "center",
                "height": "100%",
                "width": "120px"
              }
            }
          },
          formatter : function (value, row, index) {
            // __PUBLIC__ 会报错
            //  __STATIC__/../ => public 文件夹
            var img_src = "__STATIC__/../uploads/goodsImg/"+value;
            return "<a href='#' onclick='allListBigImg("+index+")'><img style='width: 110px;height: 80px;' src='"+img_src+"' alt='暂无图片'></a>"
          }
        },
        {field:'gNum', title:'生产数量', sortable: true},
        {field:'gPrice', title:'定价', sortable: true},
        {field:'gPlace', title:'生产地点',sortable: true,
          cellStyle: formatTableUnit,
          formatter: paramsMatter,},
        {field:'gDate', title:'生产日期', sortable: true},
        {field:'gProcess', title:'生产加工', sortable: true,
          cellStyle: formatTableUnit,
          formatter: paramsMatter,},
        {field:'gMaterial', title:'原材料',sortable: true,
          cellStyle: formatTableUnit,
          formatter: paramsMatter,},
        {field:'gQuality', title:'产品质量', sortable: true},
        {field:'gGrade', title:'产品等级', sortable: true},
        {field:'cOpinion', title:'村镇意见', formatter: dataMatter},
        {field:'cVerify', title:'县市审核', sortable: true, formatter: dataMatter},
      ],


    })
  });
  /** 结束 **/

  /** 唤起大图 **/
  function allListBigImg(index){
    var row = $('#allList').bootstrapTable('getData')[index];
    $('#bigImg').attr('src',"__STATIC__/../uploads/goodsImg/"+row.gImg);
    $('#bigImgModal').modal();
  }
  function pendingListBigImg(index){
    var row = $('#pendingList').bootstrapTable('getData')[index];
    $('#bigImg').attr('src',"__STATIC__/../uploads/goodsImg/"+row.gImg);
    $('#bigImgModal').modal();
  }

</script>
</body>

</html>
<!---->

  {/block}